<template>
  <div id="ShiftWorkTable">
    <Menu></Menu>
    <div class="content">
      <div class="top">
        <span class="date">
          <el-date-picker v-model="dateValue" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </span>
        <span class="btn">
          <el-button type="primary">导出报表</el-button>
        </span>
      </div>
      <div class="table" style="margin-top:50px">
        <el-table :data="tableData" height="250" style="width: 100%">
          <el-table-column prop="ShiftWorkTime" label="交班时间" width="180">
          </el-table-column>
          <el-table-column prop="StartTime" label="开始时间" width="180">
          </el-table-column>
          <el-table-column prop="EndTime" label="结束时间">
          </el-table-column>
          <el-table-column prop="ShiftStaff" label="交班人">
          </el-table-column>
          <el-table-column prop="successor" label="接班人">
          </el-table-column>
          <el-table-column prop="ShiftState" label="交接状态">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="examine(scope.$index, scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
          </el-pagination>
        </div>
      </div>
      <div class="auto">
        <!-- 自动弹出 -->
        <el-dialog :visible.sync="AutoDialogVisible" width="50%" :before-close="handleClose">
          <template slot="title">
            <span>交接详情</span>
            <span class="hotelName">东莞某某某店</span>
          </template>
          <div class="ShiftWorkDetail">
            <div class="left">
              <el-date-picker v-model="dateValue2" type="datetimerange" range-separator="至" prefix-icon="el-icon-date"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
              <div class="total_amount">
                <div>
                  <span style="display:block;font-size: 20px;">￥1580.00</span>
                  <span style="display:block">合计金额</span>
                </div>
                <div>
                  <span style="display:block;font-size: 20px;">￥1712.00</span>
                  <span style="display:block">收入金额</span>
                </div>
                <div>
                  <span style="display:block;font-size: 20px;">￥0.00</span>
                  <span style="display:block">退款/支出金额</span>
                </div>
              </div>
              <div class="detail_amount">
                <div class="order">
                  <el-table :data="orderData" border style="width: 100%">
                    <el-table-column prop="order" label="订单类型">
                    </el-table-column>
                    <el-table-column prop="amount" label="收入金额">
                    </el-table-column>
                    <el-table-column prop="refund" label="退款/支出金额">
                    </el-table-column>
                    <el-table-column prop="total" label="小计">
                    </el-table-column>
                  </el-table>
                </div>
                <div class="pay">
                  <el-table :data="PayData" border style="width: 100%">
                    <el-table-column prop="order" label="订单类型">
                    </el-table-column>
                    <el-table-column prop="amount" label="收入金额">
                    </el-table-column>
                    <el-table-column prop="refund" label="退款/支出金额">
                    </el-table-column>
                    <el-table-column prop="total" label="小计">
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="Shift">
                <span>交班人:</span>
                <span>陈吉幸</span>
              </div>
              <div class="successor">
                <span>接班人:</span>
                <span>
                  <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                      :disabled="item.disabled">
                    </el-option>
                  </el-select>
                </span>
              </div>
              <el-input type="textarea" style="margin-top:20px;" placeholder="请输入备注" v-model="textarea" maxlength="30"
                show-word-limit>
              </el-input>
            </div>
          </div>
          <div class="bottom">
            <div class="left">
              <span>交接后数据不可修改，请仔细核对！</span>
            </div>
            <div class="right">
              <el-button>取消</el-button>
              <el-button type="primary">确认交接</el-button>
            </div>
          </div>
        </el-dialog>
      </div>

      <!-- 点击查看弹出 -->
      <div class="examine">
        <el-dialog title="收货地址" :visible.sync="ExamineDialogTableVisible" width="30%">
          <template slot="title">
            <span style="color:#ff4646">交接详情</span>
            <span class="hotelName">东莞某某某店</span>
          </template>
          <el-date-picker v-model="dateValue" type="datetimerange" range-separator="~" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <div class="FinancialStatistics">
            <span>财务合计</span>
          </div>
          <el-table :data="orderData" style="width: 100%">
            <el-table-column prop="order" label="订单类型">
            </el-table-column>
            <el-table-column prop="amount" label="收入金额">
            </el-table-column>
            <el-table-column prop="refund" label="退款/支出金额">
            </el-table-column>
            <el-table-column prop="total" label="合计金额">
            </el-table-column>
          </el-table>
          <el-table :data="PayData" style="width: 100%">
            <el-table-column prop="order" label="订单类型">
            </el-table-column>
            <el-table-column prop="amount" label="收入金额">
            </el-table-column>
            <el-table-column prop="refund" label="退款/支出金额">
            </el-table-column>
            <el-table-column prop="total" label="合计金额">
            </el-table-column>
          </el-table>
          <div class="bottom" style="width:100%">
            <div class="shift" style="width:50%">
              <span>交班人：</span>
              <span>陈吉幸</span>
            </div>
            <div class="successor" style="width:50%">
              <span>接班人：</span>
              <span>前台小姐姐</span>
            </div>
            <br>
          </div>
          <div class="bottom">
            <div class="remarks" style="width:50%">
              <span>备注: </span>
              <span>备注内容</span>
            </div>
          </div>
          <div class="bt">
            <el-button type="danger">拒绝加班</el-button>
            <el-button type="primary">确认交班</el-button>
          </div>
        </el-dialog>
      </div>

    </div>
  </div>
</template>

<script>
import Menu from '../../components/Menu'

export default {
  name: 'ShiftWorkTable',
  components: {
    Menu
  },
  data() {
    return {
      dateValue: '',
      dateValue2: '',
      currentPage4: 4,
      textarea: '',
      AutoDialogVisible: false,
      ExamineDialogTableVisible: false,
      value: '',
      options: [{
        value: '选项1',
        label: '陈吉幸'
      }, {
        value: '选项2',
        label: '李大为',
        disabled: true
      }, {
        value: '选项3',
        label: '黄家辉'
      }, {
        value: '选项4',
        label: '刘帅'
      }, {
        value: '选项5',
        label: '杨春燕'
      }],
      orderData: [
        {
          order: '客房订单',
          amount: '￥171',
          refund: '￥1721',
          total: '￥1721',
        },
        {
          order: '记一笔',
          amount: '￥121',
          refund: '￥1221',
          total: '￥1321',
        }
      ],
      PayData: [
        {
          order: '支付宝',
          amount: '￥171',
          refund: '￥1721',
          total: '￥1721',
        },
        {
          order: '微信',
          amount: '￥11',
          refund: '￥721',
          total: '￥721',
        }
      ],
      tableData: [{
        ShiftWorkTime: '2022-10-11 18:20:04',
        StartTime: '2022-10-11 18:20:08',
        EndTime: '2022-10-11 18:20:04',
        ShiftStaff: '张三',
        successor: '李四',
        ShiftState: '成功',
      }]
    }

  },
  methods: {
    examine(index, row) {
      console.log(index, row);
      this.ExamineDialogTableVisible = true
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .content {
  margin-left: 150px;
  padding: 30px;

  .top {
    display: flex;
    justify-content: space-between;
  }

  .table {
    .pagination {
      display: flex;
      flex-direction: row-reverse;
      background: white;
    }
  }

  .auto {
    .el-dialog {
      .hotelName {
        padding: 4px 14px;
        background: #1989fa;
        border-radius: 2px;
        font-size: 12px;
        color: white;
        margin-left: 20px;
      }
    }

    .ShiftWorkDetail {
      display: flex;

      .left {
        padding: 24px;
        width: 65%;
        // background-color: aqua;

        .time {

          // width: 357px;
          .el-date-editor {
            // height: 32px;
            // line-height: 32px;
          }

          background: #ffffff;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          font-size: 12px;
          line-height: 32px;
        }

        .total_amount {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
        }

        .detail_amount {
          .order {
            width: 100%;
            margin-top: 20px;

            // padding: 10px 15px;
            .el-table {
              border-radius: 5px;
            }
          }

          .pay {
            margin-top: 20px;
          }
        }
      }

      .right {
        width: 35%;

        // background-color: rgb(93, 194, 85);
        .el-select {
          margin-left: 10px;
        }

        textarea {
          height: 400px;
          background-color: #fafafa;
        }
      }
    }

    .bottom {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      .left {
        span {
          color: #ff4646;
          background: #fff1f0;
          border-radius: 16px;
          padding: 4px 15px;
          line-height: 40px;
        }
      }
    }
  }

  .right {}

  .examine {
    .el-table {
      margin-top: 20px;
    }

    .has-gutter {
      border-radius: 8px;

      th {
        background-color: #fafbfa;
      }
    }

    .el-dialog {
      padding: 0 20px;

      .hotelName {
        padding: 4px 14px;
        background: #1989fa;
        border-radius: 2px;
        font-size: 12px;
        color: white;
        margin-left: 20px;
      }

      .FinancialStatistics {
        width: 100%;
        height: 40px;
        background: #f9f9f9;
        line-height: 40px;
        color: #666666;
        padding-left: 16px;
        margin-top: 10px;
        border-radius: 8px;
      }
    }

    .bottom {
      display: flex;
    }

    .bt {
      margin-top: 50px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>